<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>图书列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/style/tzjg.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/css.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/Animation.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">
    <link rel="stylesheet" th:href="@{/layui/dist/css/view.css}"/>
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" media="all">

</head>

<body>
<!--头开始-->
<header class="navbar-fixed-top headerbg">
    <!--导航栏剩余部分-->
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi">
                <h3>
                    <a th:href="@{/myBook}" style="text-decoration: none" th:text="'hello，'+${username}">hello，xxx</a>
                </h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/revampUser}">修改信息</a></h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a href="#" onclick="downloadfile();">导出图书列表</a></h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/loginout}">注销</a></h3>
            </li>
        </ul>
    </div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated" style="height:200px;">
    <div class="imgFull"><img class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}"></div>
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>

<div class="container pb-15" style="width: 90%;margin-left: 5%;">
    <!-- Example row of columns -->
    <div class="row">
        <div class="label-div b-30 border-all pt-5 t-20" style="position: relative; padding-left: 0;">
            <div style="padding-left:30px;width: 90%;margin-left: 5%;">

                <div class="second" style="height: auto">
                    <h5 class="mmh5 b-20">图书列表</h5>

                    <form th:action="@{/index}">
                        <div class="layui-form layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-mid">书籍名称:</div>
                                <div class="layui-input-inline" style="width: 120px;">
                                    <input type="text" autocomplete="off" class="layui-input" name="bookName">
                                </div>
                                <div class="layui-form-mid">出版社:</div>
                                <div class="layui-input-inline" style="width: 120px;">
                                    <input type="text" autocomplete="off" class="layui-input" name="bookPublishers">
                                </div>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="layui-form-mid">类型:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <select name="bookType">
                                        <option value="">请选择</option>
                                        <option th:selected="${bookType == '1'}" value="1">古典文学</option>
                                        <option th:selected="${bookType == '2'}" value="2">青春文学</option>
                                        <option th:selected="${bookType == '3'}" value="3">小说</option>
                                        <option th:selected="${bookType == '4'}" value="4">艺术</option>
                                        <option th:selected="${bookType == '5'}" value="5">文化</option>
                                        <option th:selected="${bookType == '6'}" value="6">历史</option>
                                        <option th:selected="${bookType == '7'}" value="7">经济</option>
                                    </select>
                                </div>
                                <button class="layui-btn layui-btn-blue" type="submit">查询</button>
                            </div>
                        </div>
                    </form>

                    <div class="news-list">
                        <div style="width: 752px;" th:each="book:${booklist}">
                            <div class="news_list mtb20">
                                <ul class="list_style">
                                    <li class="news_info wow fadeInUp" style="width: 1160px">
                                        <span class="contents" style="width: 1160px">
                                            <div class="news_time">
                                                <img class="lazyloadimg" alt="书籍封面"
                                                     th:src="@{'/article/'+${book.photo}}" width="135px"
                                                     height="135px"/>
                                            </div>
                                            <div class="news_contents">
                                                <h3 style="display: inline">
                                                    <a th:href="@{/bookDetails(bookNumber=${book.bookNumber})}"
                                                       style="color: #0C0C0C">
                                                      <span th:text="${book.bookName}">书名</span>
                                                    </a>
                                                </h3>
                                                <p th:text="${'&nbsp;&nbsp;'+book.bookAuthor}" style="display: inline">作者</p>
                                                <p th:text="${'&nbsp;&nbsp;'+book.bookPublishers}"
                                                   style="display: inline">出版社</p>
                                                <p th:text="${'&nbsp;&nbsp;书籍余量('+book.bookNum+'本)'}"
                                                   style="display: inline">书籍余量</p>

                                            </div>
                                                <br>
                                              <div style="padding:15px 5px 10px 170px;width:1100px;height:150px;">
                                                      <p th:text="${'&nbsp;&nbsp;书籍简介：'+book.brief}"
                                                         readonly="readonly">简介
                                                  </p>
                                              </div>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!--分页导航-->
                        <div class="pagination center pagination-large pt-20" style="margin-left: 30%">
                            <div class="row text-center">
                                <div class="col-md-12">
                                    <ul class="pagination">
                                        <li><a th:class="${currentPage eq 1 ? 'btn disabled' : '' }" href="javascript:;"
                                               th:href="@{/index(page=1,bookName=${bookName},bookPublishers=${bookPublishers},bookType=${bookType})}">首页</a>
                                        </li>
                                        <li><a th:class="${currentPage eq 1 ? 'btn disabled' : '' }"
                                               href="javascript:void(0);"
                                               th:href="@{/index(page=${currentPage}-1,bookName=${bookName},bookPublishers=${bookPublishers},bookType=${bookType})}">&laquo;</a>
                                        </li>
                                        <li th:class="${page eq currentPage} ? 'active' : ''"
                                            th:each="page:${#numbers.sequence(1,totalPage)}">
                                            <a href="javascript:void(0);"
                                               th:href="@{/index(page=${page},bookName=${bookName},bookPublishers=${bookPublishers},bookType=${bookType})}"
                                               th:text="${page}">1</a>
                                        </li>
                                        <li><a th:class="${currentPage eq totalPage ? 'btn disabled' : '' }"
                                               href="javascript:void(0);"
                                               th:href="@{/index(page=${currentPage}+1,bookName=${bookName},bookPublishers=${bookPublishers},bookType=${bookType})}">&raquo;</a>
                                        </li>
                                        <li><a th:class="${currentPage eq totalPage ? 'btn disabled' : '' }" href="#"
                                               th:href="@{/index(page=${totalPage},bookName=${bookName},bookPublishers=${bookPublishers},bookType=${bookType})}"
                                               style="border: 1px solid #ddd;">尾页</a></li>
                                        <li><a style="border: 0px;margin-left: 0px;">当前页<span
                                                th:text="${currentPage}"></span>/<span th:text="${totalPage}"></span>总页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin-top: 80px"></div>
<footer class="footerBg" style="position:fixed;bottom: 0;z-index:30;width: 100%;margin-top:20px">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span><span
            class="CopyRight_name">图书管理系统 </span></div>
</footer>


<script type="text/javascript" th:src="@{/js/function.js}"></script>
<script type="text/javascript" th:src="@{/js/tzjg.js}"></script>
<script type="text/javascript" th:src="@{/js/borsertocss.js}"></script><!-- 判断在IE9以下浏览器中根据像素的不同而设置的样式 -->
<script type="text/javascript" th:src="@{/js/bootstrap.js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/mb/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/mb/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/layui/dist/layui.all.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
<script type="text/javascript">
    function downloadfile() {
        window.location.href = "/booksystem/loadBook";
    }
</script>
</body>
</html>